<template>
    <div class="box-shadow dev formList">
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="130px">
          <div>
            <i class="icon2"></i>
            <div class="headline2">
              <span>超级管理员</span>
            </div>
          </div>

          <div class="dev2">
            <el-form-item label="超级管理员姓名">
              {{form.contact_name}}
            </el-form-item>
            <el-form-item style="position:relative;left:-50px;top:-20px" label-width="180px" label="超级管理员身份证件号码" >
              {{form.contact_id_number}}
            </el-form-item>
            <el-form-item label="联系手机" prop="mobile_phone" style="position:relative;top:-30px">
              <el-input v-model="form.mobile_phone	"></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱" prop="contact_email" style="position:relative;top:-30px">
              <el-input v-model="form.contact_email	"></el-input>
            </el-form-item>

          </div>


          <el-form-item>
            <div style="margin-left: 70%;margin-bottom:20px">
              <el-button type="primary" @click="submitForm">提交并保存</el-button>
              <el-button @click="returnIndex">返回</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

</template>

<script>
  import {getContactInfo, addContactInfo} from '@/api/applet/payAudit'
  import imageUpload from '@/components/ImageUpload'

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {imageUpload},
    props: { //组件传值
      contactInfoStr: {
        type: Boolean,
        default: true,
      },
      indexStr: {
        type: Boolean,
        default: true,
      },
      businessCodeStr:{
        type: String,
        default: '',
      }
    },
    data() {
      //这里存数据
      return {
        //授权单对象
        payAudit:{},
        form: {},
        // 查询参数
        queryParams: {
        },
        // 表单校验
        rules: {
          mobile_phone: [
            {required: true, message: '联系手机不能为空', trigger: 'blur'}
          ],
          contact_email: [
            {required: true, message: '联系邮箱不能为空', trigger: 'blur'}
          ],
        }
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      returnIndex() {
        window.scrollTo(0,0);
        this.$emit("update:contactInfoStr", false);
        this.$emit("update:indexStr", true);
        this.$emit('getData', null)
      },
      getSubjectInfo() {
        getContactInfo(this.businessCodeStr).then((response) => {
          this.form = response.data.contactInfo
          this.payAudit = response.data
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            addContactInfo(this.form,this.payAudit.businessCode).then((response) => {
              this.msgSuccess('新增成功')
              this.open = false
              this.returnIndex()
            })
          }
        })
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getSubjectInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>

  .icon1 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  }

  .icon2 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline2 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
    margin-top: 20px;
  }


  .box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .dev {
    margin-left: 10%;
    margin-top: 2%;
    width: 70%;
    height: 700px;
  }

  .dev2 {
    margin-left: 10%;
    margin-top: 2%;
    width: 50%;

  }
</style>
